---
title: Code
package: "@chakra-ui/layout"
image: "components/code.svg"
description:
  Code is a component used to display inline code. It is composed from the Box
  component with a font family of `mono` for displaying code.
---

`Code` is a component used to display inline code. It is composed from the
[Box](/docs/layout/box) component with a font family of `mono` for displaying
code.

<ComponentLinks
  theme={{ componentName: "code" }}
  github={{ package: "layout" }}
  npm={{ package: "@chakra-ui/layout" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Code } from "@chakra-ui/react"
```

## Usage

```jsx
<Code>Hello world</Code>
```

### Colors

You can change the color scheme of the component by passing the `colorScheme`
prop.

```jsx
<Stack direction="row">
  <Code children="console.log(welcome)" />
  <Code colorScheme="red" children="var chakra = 'awesome!'" />
  <Code colorScheme="yellow" children="npm install chakra" />
</Stack>
```

## Props

<PropsTable of="Code" />
